<template>
  <f7-page>
    <f7-navbar title="街景" back-link="Back"></f7-navbar>
       <div id="panorama"></div>
  </f7-page>
</template>

<script>
import { getHistorys } from '@/api/api';
import conver from '@/utils/conver'
import BaiduMap from '@/utils/bmap.js'
export default {
  data: function() {
          return {
             panorama:null//街景地图实例
          }
        },
  methods:{

        init(){
           let device = this.$store.state.devices.list[this.$store.state.devices.index[this.$store.state.devices.selectId]];
            if(!device.position){
              this.$f7.toast.create({
                 text: '位置无效',
                 closeTimeout: 2000,
               }).open();

                  return;
            }
           var point = conver.wgs84togcj02(device.position.longitude, device.position.latitude);
           var baiduPoint = conver.gcj02tobd09(point[0], point[1])
           if(this.panorama==null){
               this.panorama = new BMap.Panorama("panorama");          // 创建地图实例
           }
            this.panorama.setPosition(new BMap.Point(baiduPoint[0], baiduPoint[1]));
        }

  },
  created(){

  },
  mounted () {
    if(!this.$store.state.global.loadBmap){
      BaiduMap.init()
      .then((BMap) => {
      this.init();
          this.$store.dispatch('initGlobalPropertys',[{key:'loadBmap',value:true}])
      })
    }else{
      this.init();
    }


    },
    beforeDestroy() {
         this.panorama=null;
    }
}
</script>
<style>
#panorama {width:100%; height: 100%;}
#panorama > div:last-child {
       display:none;
   }
  .lbspopup {
    margin: -125px -79px;
      top: -12px!important;
    font-size: 12px;
    padding: 4px;
  }
.lbspopup:before, .lbspopup:after{
  left:53px;
}
.control{
  position: fixed;
    bottom: 0px;
    width: 93%;
    padding: 10px;
}
.paddtop{
  padding-top: 8px;
}
</style>
